<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <style>
        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }
        .datatable td, .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>系统设置<small>子菜单管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统设置</el-breadcrumb-item>
            <el-breadcrumb-item>子菜单管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input placeholder="菜单名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"></el-input>
                <el-button @click="_findPage()" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
            </div>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="name" label="菜单名称" align="center"></el-table-column>
                <el-table-column prop="linkUrl" label="访问路径" align="center"></el-table-column>
                <el-table-column prop="path" label="路由路径" align="center"></el-table-column>
                <el-table-column prop="description" label="描述" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
            <!-- 新增标签弹层 -->
            <div class="add-form">
                <el-dialog title="新增子菜单" :visible.sync="dialogFormVisible">
                    <template>
                        <el-tabs v-model="activeName" type="card">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form label-position="right" label-width="100px">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="子菜单名称">
                                                <el-input v-model="formData.name"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="访问路径">
                                                <el-input v-model="formData.linkUrl"/>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="路由路径">
                                                <el-input v-model="formData.path"/>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form-item label="描述">
                                                <el-input v-model="formData.description" type="textarea"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleAdd()">确定</el-button>
                    </div>
                </el-dialog>
            </div>

            <!-- 编辑标签弹层 -->
            <div class="add-form">
                <el-dialog title="编辑子菜单信息" :visible.sync="dialogFormVisible4Edit">
                    <template>
                        <el-tabs v-model="activeName" type="card">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form label-position="right" label-width="100px">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="子菜单名称">
                                                <el-input v-model="formData.name"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="访问路径">
                                                <el-input v-model="formData.linkUrl"/>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="路由路径">
                                                <el-input v-model="formData.path"/>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form-item label="描述">
                                                <el-input v-model="formData.description" type="textarea"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vue = new Vue({
        el: '#app',
        data:{
            activeName:'first',//添加/编辑窗口Tab标签名称
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize:10,
                total:100,
                queryString:null,
            },
            dataList: [],//列表数据
            formData: {},//表单数据
            backend_url:"http://localhost:82",//controller url
            tableData:[],//新增和编辑表单中对应的子菜单列表数据
            sonIds:[],//新增和编辑表单中主菜单对应的复选框，基于双向绑定可以进行回显和数据提交
            dialogFormVisible: false,//控制添加窗口显示/隐藏
            dialogFormVisible4Edit:false//控制编辑窗口显示/隐藏
        },
        created() {
            this._findPage();
        },
        methods: {
            //编辑
            /*
            1.获取表单参数，
            2.关闭弹窗,给出编辑成功 或者 失败 提示
            3.刷新页面
            */
            handleEdit() {
                //发送ajax请求
                axios.post(this.backend_url+"/menu/editSonMenu.do",this.formData).then((res)=>{
                    //关闭弹窗，并给出提示
                    this.dialogFormVisible4Edit=false;
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? 'success':'error'
                    });
                    //刷新页面
                    this.findPage();
                }).catch((error)=>{
                    console.log(error);
                })
            },
            //添加
            /*
            步骤：1. 发送post请求，传递子菜单选中列表
                 2. 服务返回处理
                    1. 关闭新增窗口
                    2. 保存成功，提示正确消息
                    3. 保存失败，提示错误消息
                 3. 无论成功与否刷新当前页面
            */
            handleAdd () {
                axios.post(this.backend_url+"/menu/addSonMenu.do",this.formData).then((res)=>{
                    //关闭新增窗口
                    this.dialogFormVisible=false;
                    //给出 添加成功或者失败提示
                    this.$message({
                        message:res.data.message,
                        type:res.data.flag ?"success":"error"
                    })
                    //刷新当前页面
                    this.findPage();
                }).catch((error)=>{
                    console.log(error);
                })
            },
            //条件查询
            _findPage() {
                if (this.pagination.queryString != null && this.pagination.queryString.length > 0) {
                    //如果 有条件 则把查询到的数据从第一页进行显示
                    this.pagination.currentPage=1;
                }
                this.findPage();
            },
            //分页查询
            /*
            步骤：1.封装参数，发送ajax请求
                 2.处理数据
            */
            findPage() {
                //封装参数
                var params={
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                }
                //发送 ajax请求
                axios.post(this.backend_url+"/menu/findPageSonMenu.do",params).then((res)=>{
                    //响应成功 返回的是pageResult对象  其中total 总记录数  rows 当前页数据
                    this.pagination.total=res.data.total;
                    this.dataList=res.data.rows;

                }).catch((error)=>{
                    console.log(error);
                })

            },
            // 重置表单
            resetForm() {
                this.formData={};
            },
            // 弹出添加窗口
            //步骤
            /*1. 新增窗口可见
              2. 重置表单数据
              3. 切换到第1个标签
              4. 重置子菜单数组
              5. 发送请求，获取子菜单列表，处理返回数据
                //1. 返回成功，更新tableData
               //2. 返回失败，弹出错误提示
           */
            handleCreate() {
                //弹出窗口
                this.dialogFormVisible=true;
                //重置表单数据
                this.resetForm();
                //切换到第一个标签
                this.activeName="first";
            },
            // 弹出编辑窗口，进行数据回显
            /*
            步骤：
            1. 发送请求，根据ID获取主菜单数据
            2. 处理返回数据
               1. 弹出编辑窗口
               2. 选中第一个Tab标签
               3. 把数据赋值给formData
               4. 获取子菜单全部数据，并赋值给tableData
                  1. 根据主菜单ID获取选中的子菜单列表
                  2. 把选中的数据赋值给sonIds
             */
            handleUpdate(row) {
                //弹出编辑框
                this.dialogFormVisible4Edit=true;
                //切换到第一个标签
                this.activeName='first';
                //1.发送ajax请求，根据主菜单id row.id获取菜单数据
                //console.log(row.id);
                axios.get(this.backend_url+"/menu/findById.do?id="+row.id).then((res)=>{
                    //查询到数据,给表单赋值
                    this.formData=res.data.data;
                }).catch((error)=>{
                    console.log(error);
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                //vue对象 中的当前页码进行赋值
                this.pagination.currentPage=currentPage;
                //进行分页查询
                this.findPage();
            },
            // 删除
            /*
            步骤：1.弹出提示框，
                2.点击确定删除，获取要删除的主菜单的id值，发送ajax请求
                3.处理结果
                4.删除完毕，刷新界面
             */
            handleDelete(row) {
                //弹出提示框，点击确定时 执行 then里面的东西
                this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //获取要删除的主菜单的id值，发送ajax请求
                    axios.get(this.backend_url+"/menu/delById.do?id="+row.id).then((res)=>{
                        //根据响应结果给出提示信息  删除成功或者删除失败
                        this.$message({
                            message:res.data.message,
                            type:res.data.flag ? 'success':'error'
                        });
                        this.findPage();
                    }).catch((error)=>{
                        console.log(error);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    })
</script>
</html>
